<include file="Public:header"/>
<!--主页面-->
<div id="main-content" class="content">
    <div class="content-box">

        <ul class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li><a href="">文章管理</a></li>
            <li class="active">添加文章</li>
        </ul>
        <div class="page-header clearfix">
            <h3>文章管理</h3>
            <ul class="nav nav-tabs">    
                <li>
                    <a href="{:U('Article/articleList')}">文章列表</a>
                </li>
                <li class="active">
                    <a href="javascript:;">添加文章</a>
                </li>
            </ul>
        </div>

        <!--表格内容-->
        <div class="content-box-content">
            <!--表单 start-->
            <form action="{:U('Article/addArticle')}" method="post" class="form-horizontal" role="form" onsubmit="putData()">
                <div class="form-group">
                    <label for="title" class="col-sm-3 control-label"><em class="prompt-red">*</em>标题：</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="title" name="title" placeholder="标题" required>
                    </div>
                  </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label"><em class="prompt-red">*</em>封面图片：</label>
                    <div id="imgPreview">

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-9">
                        <input type="file" name="head_pic_upload"/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="desc" class="col-sm-3 control-label"><em class="prompt-red"></em>文章简介：</label>
                    <div class="col-sm-9">
                        <textarea style="width:60%;height:100px;" id="desc" name="desc"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content" class="col-sm-3 control-label"><em class="prompt-red">*</em>文章内容：</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" id="content" style="width:auto;height:300px;visibility:hidden;" ></textarea>
                        <textarea name="content" style="display:none;"></textarea>
                        <div class="newhtml" style="display:none;"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sort" class="col-sm-3 control-label"><em class="prompt-red"></em>排序：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="sort" name="sort" placeholder="排序">
                    </div>
                </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <button type="submit" class="btn btn-default btn-primary">确认添加</button>
                    </div>
                  </div>
            </form>
            <!--表单 end-->
        </div>
    </div>
</div>
<!--富文本-->
<script  src="__WEBPUBLIC__/Common/kindeditor/kindeditor-min.js"></script>
<script  src="__WEBPUBLIC__/Common/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#content', {
            resizeType : 1,
            uploadJson : '__WEBPUBLIC__/Common/kindeditor/php/upload_json.php',
            fileManagerJson :
                    '__WEBPUBLIC__/Common/kindeditor/php/file_manager_json.php',
            allowPreviewEmoticons : false,
            items:[
                'source', '|', 'undo', 'redo', '|', 'cut', 'copy','|', 'justifyleft',
                'justifycenter', 'justifyright',
                'justifyfull', 'clearhtml', 'selectall', '|', 'formatblock',
                'fontname', 'fontsize', '|', 'forecolor',
                'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough','image','multiimage'
            ],
            afterBlur:function(){this.sync();}
        });
    });

    function ajax(){
        var filesize = this.files[0].size;
        if (filesize > 10000*1024) {
            alert("请上传大小在500k以下的图片");
            return false;
        }
        var files = this.files;
        var i = '';
        $("#imgPreview").html(" ");
        for(i=0;files.length;i++){
            var picname = files[i].name;
            var reader = new FileReader();
            reader.onload = function(e){
                var src = e.target.result;
                $.ajax({
                    type:"post",
                    url:"{:U('Article/uploadPic')}",
                    data: {"pic":src,"pic_name":picname},
                    dataType : "json",
                    success : function(data){
                        var data = JSON.parse(data);
                        if(data['flag'] == "success"){
                            $("#imgPreview").append("" +
                                    "<div class='parents'>" +
                                    "<div class='one_del'>[-]</div>" +
                                    "<input type='hidden' value='"+data['data']['path']+"' name='pic'/>"+
                                    "<div>" +
                                    "<img src='"+'/'+data['data']['path']+"' style='width: 150px;'>" +
                                    "</div>" +
                                    "</div>");
                            bindClick();
                        }
                    }
                });
            }
            reader.readAsDataURL(files[i]);
        }
    }
    $("input[name='head_pic_upload']").on('change',ajax);
    function bindClick() {
        $(".one_del").click(function () {
            var url = "{:U('Article/delPhoto')}";
            var file_path = $(this).next().val();
            $.post(url,{file_path:file_path},function(data){
                if(data == 1){
                    $("#imgPreview").html("");
                }else{
                    alert("删除失败！请重新尝试！");
                }
            })
        })
    }

    function putData() {
       var html = $("#content").val();
        $('.newhtml').html(html);
        var newhtml = $('.newhtml');
        newhtml.find("img").css("maxWidth","100%");
        $("textarea[name='content']").val(newhtml.html());
    }
    bindClick();
</script>
<include file="Public:footer"/>
